<template>
    <div class="editAgent">
        <el-col v-bind="grid2">
      <el-form ref="editPersonnelForm" v-loading="editAgentLoading" :model="editPersonnelForm" :rules="editPersonnelRules" label-width="100px" class="editAgentCls">
        <el-form-item label="选择角色：" prop="systemRoleId">
            <el-select v-model="editPersonnelForm.systemRoleId"  placeholder="请选择角色">
                <el-option
                v-for="item in optionsRole"
                :key="item.id"
                :label="item.rules"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择活动：" prop="activityId">
          <el-input v-model="editPersonnelForm.activityId" placeholder="请选择活动" size="small" clearable :disabled="true" />
          <el-button type="primary" @click="openRole" style="display: inline-block;">选择活动</el-button>
        </el-form-item>
        <el-form-item label="账号：" prop="account">
          <el-input v-model="editPersonnelForm.account" placeholder="请输入账号" size="small" clearable />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="editPersonnelForm.password" placeholder="请输入密码" size="small" clearable />
        </el-form-item>
        <el-form-item label="名称：" prop="realName">
          <el-input v-model="editPersonnelForm.realName" placeholder="请输入名称" size="small" clearable />
        </el-form-item>
        <el-form-item label="选择级别：" props="level" class="specType">
            <el-input-number v-model="editPersonnelForm.level" :min="0" :max="1000" label="选择级别"></el-input-number>
          </el-form-item>
        <el-form-item label="选择状态：" props="status" class="specType">
            <el-radio-group v-model="editPersonnelForm.status">
              <el-radio :label="0" >可用</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        <div class="subBtnWid">
          <el-button size="small" type="primary" :loading="loadingBtn" @click="subRoles()">提交</el-button>
        </div>
        <div class="subBtnWid">
          <el-button size="small" @click="subClone('editPersonnelForm')">取消</el-button>
        </div>
      </el-form>
    </el-col>
    </div>
  </template>
  
  <script>
  import {
    postRoleListApi,putEditRoleApi,getAppointRoleInfoApi,getRoleListApi,postPersonnelApi,getPersonnelApi
  } from '@/api/system'
  import { mapGetters } from "vuex";
  export default {
    name: 'Index',
    props: {
      editId: {
        type: [String, Number],
        default: 0
      },
      isEdit: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
        var validateActivityId = (rule, value, callback) => {
            console.log(this.editPersonnelForm.systemRoleId,'====');
            console.log(value);
            let roleId = this.editPersonnelForm.systemRoleId
        if (roleId == '') {
            callback(new Error('请选择角色'));
        }else if(roleId == 1 || roleId == 2) {
            callback();
        }else if(value){
            callback();
        }else{
            callback(new Error('请选择活动'));
        }
      };
      return {
        optionsRole: [],
        grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
        editPersonnelForm: {
        activityId: '',
        account: '',
        password: '',
        status: 0,
        level: 0,
        realName:'',
        systemRoleId: '',
        },
        refAgentId: 0,
        editPersonnelRules: {
            activityId: [
            {  validator: validateActivityId, trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入账号', trigger: 'change' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' }
          ],
          realName: [
            { required: true, message: '请输入名称', trigger: 'change' }
          ],
          systemRoleId: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ]
        },
        routeId:'',
        refAgentList: [],
        editAgentLoading: false,
        loadingBtn: false,
        level: 0,
        oldLevel: 0
      }
    },
    computed: {
      ...mapGetters(["customRouter"]),
    },
    mounted() {
        this.getRoles();
    this.routeId = this.$route.query.id;
    console.log("this.routeId>>",this.routeId);
    if (this.routeId) {
        getPersonnelApi(this.routeId)
        .then((res) => {
          console.log("提交res", res);
          this.editPersonnelForm = res;
         
          console.log("this.editPersonnelForm.this.timeValue", this.timeValue);
          this.$message.success("信息获取成功!");
        })
        .catch(() => {});
    }
      
    },
    methods: {
      /**
         * 关闭
         */
      subClone() {
        setTimeout(() => {
                this.$router.push({
                  path: `${this.customRouter}/system/system_admin/personnel`,
                });
              }, 500);
      },
      /**
         * 提交
         */
      subRoles() {
        console.log("this.editPersonnelForm>>>",this.editPersonnelForm);
        this.$refs.editPersonnelForm.validate((valid) => {
          if (valid) {
            if (this.isEdit == 1) {
              this.$set(this, 'loadingBtn', true)
              putEditPersonnelApi(this.editPersonnelForm,this.editId).then(() => {
                this.$message.success('编辑成功')
                this.$set(this, 'loadingBtn', false)
              }).catch(() => {
                this.$set(this, 'loadingBtn', false)
              })
            } else {
              this.$set(this, 'loadingBtn', true)
              console.log("editPersonnelForm>>>>>>s",this.editPersonnelForm);
              postPersonnelApi(this.editPersonnelForm).then(() => {
                this.$message.success('添加成功')
                setTimeout(() => {
                this.$router.push({
                  path: `${this.customRouter}/system/system_admin/personnel`,
                });
              }, 500);
                this.$set(this, 'loadingBtn', false)
              }).catch(() => {
                this.$set(this, 'loadingBtn', false)
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
      })
      },
  
      /**
         * 获取角色信息
         */
      getPersonnel() {
        getAppointPersonnelInfoApi(this.editId).then(res => {
          console.log("editPersonnelForm》》》",res);
          this.$set(this, 'editPersonnelForm', res)
        }).catch(() => {
          this.$set(this, 'editPersonnelForm', {})
          this.$set(this, 'editAgentLoading', false)
        })
      },
      /**
       * 获取角色信息
       * */
      /**
     * 获取角色信息
     */
    getRoles() {
      getRoleListApi({
        pageNumber: 0,
        pageSize: 100,
        orderby: "Id desc",
        status: -1,
      }).then((res) => {
        this.optionsRole = res.data
        console.log("editPersonnelForm.systemRoleId",this.optionsRole);
      });
    },
      openRole(){
        const _this = this;
      _this.$modal({
        componentProps: {
        //   editId: id,
          isEdit: 1,
        },
        component: (resolve) => require(["./components/activityList"], resolve),
        props: {
          title: "编辑",
          customClass: "zdyDialogCls editAgentDialogCls",
          width: "100%",
          closeOnClickModal: false,
        },
        methods: {
            getActivityList(id) {
            _this.editPersonnelForm.activityId = id;
            console.log("_this.editPersonnelForm.activityId》》",_this.editPersonnelForm.activityId);
          },
        },
      });
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  
  <style lang="scss">
  .editAgent{
    margin: 20px;
  }
    .el-dialog.agentUserDialogCls {
      max-width: 1000px;
    }
  </style>
  